<template>
  <div>
    <div>
      <el-form :inline="true" >
        <el-form-item label="位置">
          <el-select v-model="position" clearable placeholder="请选择" @change="getMainListReset">
            <el-option v-for="item in positionList" :key="item.ad_which_page" :label="item.ad_which_page_title" :value="item.ad_which_page"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goto('')"><i class="iconfont icon-plus"></i>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="缩略图"
          width="200"
        >
          <template slot-scope="scope">
            <img class="categoryimg" :src="imgUrl+scope.row.ad_img_url" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="ad_title"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          label="位置"
          prop="ad_which_page_title"
          width="150"
        >
        </el-table-column>

        <el-table-column
          prop="category_enable"
          label="状态"
          width="200"
        >
          <template slot-scope="scope">
            <el-switch
              @change="_updateStatus($event, scope.row)"
              v-model="scope.row.checkStatus"
              active-text="上线"
              inactive-text="下线">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          prop="role_name"
          label="排序"
        >
          <template slot-scope="scope">
            <p>
              <i class="iconfont icon-arrowsupline bigicon" :class="scope.$index===0 ? 'c999' : 'blue'" @click="rankUp(mainList, scope.$index)"></i>
              <i class="iconfont icon-arrowsdownline bigicon" :class="scope.$index === mainList.length - 1 ? 'c999' : 'blue'" @click="rankDown(mainList, scope.$index)"></i>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getPositionList, getADList, updateStatus, rank, delAd} from 'api/ADmanagementAPI'
import config from 'api/config'
import {mapMutations} from 'vuex'
import { pageSizeArr } from 'common/config/constConfig'

export default {
  computed: {

  },
  data() {
    return {
      pageSizeArr,
      positionList: [],
      position: '',
      imgUrl: config.imgUrl,
      mainList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    }
  },
  methods: {
    ...mapMutations('admoduleData', ['saveAdData']),
    goto(row) {
      let url = '/home/createAd'
      if(row){
        url += '/' + row.ad_id
        this.saveAdData(row)
      }
      this.$router.push(url)
    },
    _updateStatus(value, row){
      let data = {ad_id: row.ad_id}
      if(value){
        data.ad_status = 1
      }else{
        data.ad_status = 2
      }
      updateStatus(data).then(res => {
        if(res) {
          this.$message({
            message: res.rMsg,
            type: 'success'
          })
          this._mainList()
        }
      })
    },
    rankUp(arr, index){
      if(index === 0){
        return
      }
      let sendObj = {}
      sendObj.curr_id = arr[index].ad_id
      sendObj.other_id = arr[index - 1].ad_id
      this._rankAD(sendObj)
    },
    rankDown(arr, index){
      let len = arr.length
      if(len-1 === index){
        return 
      }
      let sendObj = {}
      sendObj.curr_id = arr[index].ad_id
      sendObj.other_id = arr[index + 1].ad_id
      this._rankAD(sendObj)
    },
    _rankAD(data){
      rank(data).then(res => {
        if(res){
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this._caozuoAfter()
        }
      })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row)
      })
    },
    _del(row){
      delAd(row.ad_id).then(res => {
        this.$message({
          message: res.rMsg,
          type: 'success'
        })
        this._caozuoAfter()
      })
    },
    _caozuoAfter(){
      this.page.page = 1
      this._mainList()
    },
    initData(){
      this.form = {}
    },
    getMainListReset(){
      this.page.page = 1
      this._mainList()
    },
    // 获取
    _mainList(){
      let data = {}
      data.pageInfo = {...this.page}
      data.ad_which_page = this.position
      getADList(data).then(res => {
        this.page.total = res.pageInfo.Total
        res.rData.forEach(item => {
          item.checkStatus = item.ad_status === 1
        })
        this.mainList = res.rData
      })
    },
    _getPositionList() {
      getPositionList().then(res => {
        this.positionList = res.rData
      })
    }
  },
  created(){
    this._mainList()
    this._getPositionList()
  }
}
</script>

<style lang="scss" scoped>
// .mytable /deep/ .el-table td{
//   vertical-align: top;
// }
// .mytable /deep/ .el-button{
//   padding: 0px 2px;
// }
.icon-arrowsupline, .icon-arrowsdownline{
  cursor: pointer;
}
.categoryimg{
  height: 80px;
}
.c999{
  color: #999;
}
.bigicon{
  font-size: 22px;
  font-weight: bold;
}
.blue{
  color: #409EFF;
}
.blod{
  font-weight: bold;
}
</style>
